<!--
 * 开关选择器组件
-->
<template>
	<page-layout class="page-layout">
		<!-- 基础使用 -->
		<app-demo-module title="基础使用">
			<pure-switch v-model="isChecked1"></pure-switch>
		</app-demo-module>

		<!-- 禁用 -->
		<app-demo-module title="禁用">
			<pure-switch v-model="isChecked1" disabled></pure-switch>
		</app-demo-module>

		<!-- 自定义内容 -->
		<app-demo-module title="自定义内容">
			<pure-switch v-model="isChecked1">
				<view class="texts">
					<view class="open">开</view>
					<view class="close">关</view>
				</view>
			</pure-switch>
		</app-demo-module>
	</page-layout>
</template>

<script setup>
import { ref, computed } from "vue";

// 开关状态
const isChecked1 = ref(false);
const isChecked2 = ref(true);
</script>

<style scoped lang="scss">
.texts {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 100%;

	.open,
	.close {
		width: var(--var-pure-switch-circle-size);
		height: var(--var-pure-switch-circle-size);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 0.85em;
	}

	.open {
		color: #ffffff;
	}
}
</style>
